<template>
    <div>
        <span class="title">处分统计</span>
        <div class="card">
            <el-card :style="{ height: '1150px' }">
                <el-row :gutter="30">
                    <el-col :span="5.2">
                        <div class="block">
                            <el-date-picker
                              v-model="dateRange"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="违纪违规登记开始时"
                              end-placeholder="违纪违规登记结束时"
                              @change="handleDateChange">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="primary1" @click="fetchDataByTimeRange">查询</el-button>
                    </el-col>
                    <el-col :span="1">
                        <el-button type="primary2" @click="reApply">重置</el-button>
                    </el-col>
                </el-row>
                <div class="mid-title">
                    <el-row :gutter="10">
                        <el-col :span="0.5">
                            <div class="bg">h</div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple"><span class="sm-title">
                            处分结果人次统计
                        </span></div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple"></div>
                        </el-col>
                        <el-col :span="0.5">
                            <div class="bg">h</div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple"><span class="sm-title">
                            各系受处分学生人次统计
                        </span></div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content bg-purple"></div>
                        </el-col>
                    </el-row>
                </div>
                <div class="bottom">
                    <span class="tu1" id="tu1">
                        h1
                    </span>
                    <span class="tu2" id="tu2">
                        h1
                    </span>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import {getAllNumber, getAllNumberByTimeRange} from '../../../../api/api'

export default {
  name: 'Fouth',
  data () {
    return {
      typeNumber: [120, 60, 40, 25, 10],
      collegeData: [
        { name: '交通与物流工程学院', value: 56 },
        { name: '国际教育学院', value: 38 },
        { name: '土木工程与建筑学院', value: 27 },
        { name: '机电工程学院', value: 48 },
        { name: '汽车工程学院', value: 44 },
        { name: '经济学院', value: 30 },
        { name: '马克思学院', value: 29 }
      ],
      dateRange: [],
      startDate: null,
      endDate: null
    }
  },
  async created () {
    await this.fetchData()
  },
  async mounted () {
    await this.fetchData()
    await this.applyDiv1()
    await this.applyDiv2()
  },
  methods: {
    async fetchData () {
      try {
        const res = await getAllNumber()
        if (res.status && res.data) {
          this.typeNumber = res.data.typeNumber
          this.collegeData = res.data.collegeData
        } else {
          console.error('获取数据失败:', res.message)
        }
      } catch (error) {
        console.error('获取数据错误:', error)
      }
    },
    async fetchDataByTimeRange () {
      try {
        if (this.startDate != null && this.endDate != null) {
          const json = {
            startTime: this.startDate,
            endTime: this.endDate
          }
          console.log(json)
          const res = await getAllNumberByTimeRange(json)
          if (res.status && res.data) {
            this.typeNumber = res.data.typeNumber
            this.collegeData = res.data.collegeData
            await this.applyDiv1()
            await this.applyDiv2()
          } else {
            console.error('获取数据失败:', res.message)
          }
        } else {
          this.$message.error('请选择起始时间')
        }
      } catch (error) {
        console.error('获取数据错误:', error)
      }
    },
    async reApply () {
      await this.fetchData()
      await this.applyDiv1()
      await this.applyDiv2()
    },
    handleDateChange (val) {
      if (val) {
        this.startDate = val[0]
        this.endDate = val[1]
      } else {
        this.startDate = null
        this.endDate = null
      }
    },
    applyDiv1 () {
      let obj = echarts.init(document.getElementById('tu1'))
      let datas = this.typeNumber.map((num, index) => ({
        value: num,
        name: ['警告', '严重警告', '记过', '留校察看', '开除学籍'][index],
        itemStyle: {color: ['#F7942A', '#9F2B2B', '#62ABFC', '#61D675', '#F56C6C'][index]}
      }))
      let option = {
        tooltip: {
          show: false
        },
        legend: {
          bottom: '1%',
          left: 'center',
          itemGap: 45,
          padding: [0, 0, 80, 0],
          itemWidth: 15.6,
          itemHeight: 15.6,
          textStyle: {
            fontSize: 18.2,
            color: '#333333'
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['32%', '48%'],
            avoidLabelOverlap: false,
            label: {
              position: 'outer',
              alignTo: 'labelLine',
              bleedMargin: 5,
              formatter: '{name|{b}}\n{dot|}\n{time|{c}}',
              rich: {
                time: {
                  fontSize: 26,
                  fontWeight: 700,
                  color: '#333333'
                },
                name: {
                  fontSize: 18.2,
                  color: '#333333',
                  padding: [8, 0, 0, 0]
                },
                dot: {
                  backgroundColor: 'auto', // 适应颜色
                  width: 0,
                  height: 0,
                  borderRadius: 3, // 保证是圆角
                  fontSize: 16,
                  padding: [2.5, -2.5, 2.5, -2.5] // 这里就保证是要给宽高6的正方形
                }
              }
            },
            labelLine: {
              length: 30,
              length2: 30,
              maxSurfaceAngle: 80
            },
            data: datas
          }
        ]
      }
      obj.setOption(option)
    },
    applyDiv2 () {
      let obj = echarts.init(document.getElementById('tu2'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function (params) {
            var data = params[0] // Assuming only one series
            return `<div>
                <span style="font-weight: bold;">${data.name}</span><br/>
                <div style="display: flex; align-items: center;">
                  <span style="display: inline-block; width: 10px; height: 10px; background-color:${data.color}; margin-right: 5px;"></span>
                  受处分人次
                  <span style="font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${data.value}</span>
                </div>
              </div>`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLine: {
              show: true
            },
            axisTick: {
              show: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            },
            axisLabel: {
              fontSize: 18 // Adjust the font size for x-axis labels
            },
            interval: 10
          }
        ],
        yAxis: [
          {
            type: 'category',
            data: this.collegeData.map(item => item.name),
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              fontSize: 18
            }
          }
        ],
        series: [
          {
            name: '受处分人次',
            type: 'bar',
            barWidth: '15%',
            itemStyle: {
              color: '#166AFF'
            },
            data: this.collegeData.map(item => item.value)
          }
        ]
      }
      obj.setOption(option)
    }
  }
}
</script>

<style scoped>
.title {
    width: 250px;
    height: 28px;
    opacity: 1;
    color: #000000e6;
    text-align: left;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    padding: 20px;
    display: block;
}

.sm-title {
    width: 176px;
    height: 29px;
    opacity: 1;
    color: #333333;
    text-align: left;
    font-size: 22px;
    font-weight: 600;
    line-height: 28.6px;
}

.card {
    margin-left: 20px;
    margin-right: 20px;
}

.el-button--primary1 {
    background-color: #166AFF;
    border-color: #166AFF;
    color: white;
}

.el-button--primary2 {
    background-color: white;
    border-color: #166AFF;
    color: #166AFF;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #FFFFFF;
}

.bg {
    background: #166AFF;
    margin-top: 5px;
    color: #166AFF;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.mid-title {
    margin-top: 80px;
    margin-bottom: 1px;
}

.bottom {
    margin-top: 1px;
    height: 750px;
    width: 100%;
}

.tu1 {
    height: 750px;
    width: 700px;
    background-image: url("../../../../assets/images/third/bg.png");
    background-repeat: no-repeat;
    background-position: 48.5% 50%;
}

.tu2 {
    height: 750px;
    width: 900px;
}
</style>
